<template>
  <div class="h100">
    <div class="layout-container">
        <router-view v-if="routePath && routePath.meta && routePath.meta.activePath" :key="routePath.meta.activePath"></router-view>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs, computed, onMounted, nextTick  } from 'vue'
import { storeToRefs } from 'pinia';
import { useThemeConfig } from '/@/stores/themeConfig';
import { useRoute } from 'vue-router'
export default {
  name: 'MessageIndex',
  setup() {
      const storesThemeConfig = useThemeConfig();
      const { themeConfig } = storeToRefs(storesThemeConfig);
      const route = useRoute()
      const state = reactive({
          refreshRouterViewKey: null,
          routePath: {}
      })
      // 设置主界面切换动画
      const setTransitionName = computed(() => {
          return themeConfig.value.animation;
      });
      onMounted(() => {
          nextTick(() => {
              state.routePath = route
          })
      })
      return {
          ...toRefs(state),
          setTransitionName
      }
  }
}
</script>

<style scoped lang="scss">
.h100{
  min-height: 100vh;
}
</style>